import React from 'react';
/*import { Button } from 'antd';*/
import { connect } from 'react-redux';
import changeBrowserMode from 'Actions/webAction';
import { BROWSER_MODE } from 'Constants/webConstants';
import HeaderMenu from 'Component/HeaderMenu';
import { routeMenuConfig } from 'Constants/routeMenuConfig';
import * as routerActions from 'react-router-redux';
import './index.scss';

const $ = require('jquery');

class PageContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      curentRoute: 'home'
    };
    this.checkBrowserMode = ::this.checkBrowserMode;
    this.changeWidth = ::this.changeWidth;
    this.changeButtomImg = ::this.changeButtomImg;
    this.goBack = ::this.goBack;
  }
  componentWillMount() {
    this.checkBrowserMode();
  }
  componentDidMount() {
    window.onresize = (() => {
      this.changeWidth();
    });
    this.changeWidth();
    this.changeButtomImg();
  }
  componentDidUpdate() {
    this.changeWidth();
  }
  componentWillReceiveProps(nextProps) {
    const locationBeforeTransitions = nextProps.locationBeforeTransitions;
    const navPath = locationBeforeTransitions.pathname.split('/');
    navPath.shift();
    this.setState({
      curentRoute: navPath[0]
    });
  }
  checkBrowserMode() {
    const clientHeight = parseInt(window.innerHeight, 10);
    const clientWidth = parseInt(window.innerWidth, 10);
    this.props.dispatch(changeBrowserMode(clientWidth, clientHeight));
  }
  changeWidth() {
    this.checkBrowserMode();
   // $('#swiper').width($('.normal-work-wrapper').innerWidth());
    const clientHeight = parseInt(window.innerHeight, 10);
    const clientWidth = parseInt(window.innerWidth, 10);
    const vHeight = clientHeight > 1780 ? clientHeight : 1780;
    $('.v-page-container').css('min-height', `${vHeight}px`);
    // const vHead = parseInt($('.head-wrap').css('height'), 10);
  //  $('.content-wrap').css('height', `${clientHeight - vHead - 144}px`);
    // // 大于最小高度的时候充满屏幕
    // if (parseInt($('.side-wrapper').css('min-height'), 10) < minHeight) {
    //   $('.side-wrapper').css('min-height', `${minHeight}px`);
    //   $('.page-inner-wrapper').css('min-height', `${minHeight}px`);
    // }
    // 滚动条判断
    if (clientWidth >= 1920) {
      if (clientHeight >= 1079) {
        $('body').css('overflow-y', 'hidden');
      } else {
        $('body').css('overflow-y', 'scroll');
      }
    } else if (clientWidth >= 1366) {
      if (clientHeight >= 767) {
        $('body').css('overflow-y', 'hidden');
      } else {
        $('body').css('overflow-y', 'scroll');
      }
    } else {
      $('body').css('overflow-y', 'scroll');
    }
  }
  changeButtomImg() {
    const locationBeforeTransitions = this.props.locationBeforeTransitions;
    const navPath = locationBeforeTransitions.pathname.split('/');
    navPath.shift();
    this.setState({
      curentRoute: navPath[0]
    });
  }
  goBack() {
    this.props.dispatch(routerActions.goBack());
    console.log('back');
  }
  render() {
    const { mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    const { curentRoute } = this.state;
    if (!isVertical) {
      return (
        <div className="page-container" key="horizon">
          <div className="page-wrapper">
            <div className="head-wrap">
              <div className="logo">
                <img src="images/horizonImg/logo.png" alt="" />
              </div>
              <div className="header">
                <HeaderMenu />
              </div>
            </div>
            <div className="middle-content-wrap">
              <div className="side-wrapper" >
                <img src="images/horizonImg/home_left.png" alt="" />
              </div>
              <div className="page-wrap">
                <div className="page-content">
                  {this.props.children}
                </div>
              </div>
            </div>
            {/*<Button className="back-btn" onClick={this.goBack}>返回</Button>*/}
          </div>
          {
            curentRoute === routeMenuConfig[0].route ?
              <img src="images/horizonImg/home_buttom.png" alt="" className="bottom-img" />
              : <img src="images/horizonImg/buttom2.png" alt="" className="bottom-img" />
          }
          <img src="images/horizonImg/icon_logo.png" alt="" className="buttom-logo" />
        </div>
      );
    }
    return (
      <div className={`${isVertical ? 'v-' : ''}page-container`} key="vertical">
        <div className="v-page-wrapper">
          <div className="head-wrap">
            <div className="logo">
              <img src="images/vertical/logo.png" alt="" />
            </div>
            <div className="header">
              <HeaderMenu />
            </div>
          </div>
          <img src="images/vertical/left_border.png" className="left-border" alt="" />
          <img src="images/vertical/right_border.png" className="right-border" alt="" />
          <img src="images/vertical/buttom_border.png" className="buttom-border" alt="" />
          <img src="images/horizonImg/icon_logo.png" alt="" className="buttom-logo" />
          <div className="v-page-content-wrap">
            {this.props.children}
          </div>
          {/*<Button className="v-back-btn" onClick={this.goBack}>返回</Button>*/}
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer,
  };
}

export default connect(mapStateToProps)(PageContainer);
